const letter = {
    showLetterToUser: function () {
        const COLORS = {
            primary: '#4285f4',
            primaryDark: '#1967d2',
            accent: '#e8f0fe',
            text: '#333',
            textLight: '#666',
            background: '#f8f9fa'
        };

        const overlay = document.createElement('div');
        overlay.id = 'letter-overlay';
        overlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            backdrop-filter: blur(5px);
            animation: fadeIn 0.3s ease-out;
        `;

        const envelopeContainer = document.createElement('div');
        envelopeContainer.id = 'envelope-container';
        envelopeContainer.style.cssText = `
            position: relative;
            width: 90%;
            max-width: 650px;
            height: 400px;
            perspective: 1000px;
        `;

        const envelope = document.createElement('div');
        envelope.id = 'envelope';
        envelope.style.cssText = `
            position: absolute;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: transform 0.6s ease;
        `;

        const envelopeBack = document.createElement('div');
        envelopeBack.id = 'envelope-back';
        envelopeBack.style.cssText = `
            position: absolute;
            width: 100%;
            height: 100%;
            background: ${COLORS.background};
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 30px;
            cursor: pointer;
            transition: all 0.3s;
        `;
        envelopeBack.innerHTML = `
            <div style="font-size:clamp(1.5rem, 3vw, 1.8rem);font-weight:600;color:${COLORS.primary};margin-bottom:10px;">
                <i class="fa fa-envelope-o mr-2"></i>致海投用户的一封信
            </div>
            <div style="font-size:clamp(1rem, 2vw, 1.1rem);color:${COLORS.textLight};text-align:center;">
                点击开启高效求职之旅
            </div>
            <div style="position:absolute;bottom:20px;font-size:0.85rem;color:#999;">
                © 2025 BOSS海投助手 | Yangshengzhou 版权所有
            </div>
        `;

        envelopeBack.addEventListener('click', () => {
            envelope.style.transform = 'rotateY(180deg)';
            setTimeout(() => {
                const content = document.getElementById('letter-content');
                if (content) {
                    content.style.display = 'block';
                    content.style.animation = 'fadeInUp 0.5s ease-out forwards';
                }
            }, 300);
        });

        const envelopeFront = document.createElement('div');
        envelopeFront.id = 'envelope-front';
        envelopeFront.style.cssText = `
            position: absolute;
            width: 100%;
            height: 100%;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.2);
            transform: rotateY(180deg);
            backface-visibility: hidden;
            display: flex;
            flex-direction: column;
        `;

        const titleBar = document.createElement('div');
        titleBar.style.cssText = `
            padding: 20px 30px;
            background: linear-gradient(135deg, ${COLORS.primary}, ${COLORS.primaryDark});
            color: white;
            font-size: clamp(1.2rem, 2.5vw, 1.4rem);
            font-weight: 600;
            border-radius: 10px 10px 0 0;
            display: flex;
            align-items: center;
        `;
        titleBar.innerHTML = `<i class="fa fa-envelope-open-o mr-2"></i>致海投助手用户：`;

        const letterContent = document.createElement('div');
        letterContent.id = 'letter-content';
        letterContent.style.cssText = `
            flex: 1;
            padding: 25px 30px;
            overflow-y: auto;
            font-size: clamp(0.95rem, 2vw, 1.05rem);
            line-height: 1.8;
            color: ${COLORS.text};
            background: url('https://picsum.photos/id/1068/1000/1000') center / cover no-repeat;
            background-blend-mode: overlay;
            background-color: rgba(255,255,255,0.95);
            display: none;
        `;
        letterContent.innerHTML = `
            <div style="margin-bottom:20px;">
                <p>你好，未来的成功人士：</p>
                <p class="mt-2">&emsp;&emsp;展信如晤。</p>
                <p class="mt-3">
                    &emsp;&emsp;我是Yangshengzhou，我曾经和你一样在求职路上反复碰壁。
                    简历石沉大海、面试邀约寥寥、沟通效率低下...于是我做了这个小工具。
                </p>
                <p class="mt-3">
                    &emsp;&emsp;现在，我将它分享给你，希望能够帮到你：
                </p>
                <ul class="mt-3 ml-6 list-disc" style="text-indent:0;">
                    <li><strong>&emsp;&emsp;自动沟通页面岗位</strong>，一键打招呼</li>
                    <li><strong>&emsp;&emsp;AI智能回复HR提问</strong>，24小时在线不错过任何机会</li>
                    <li><strong>&emsp;&emsp;个性化沟通策略</strong>，大幅提升面试邀约率</li>
                </ul>
                <p class="mt-3">
                    &emsp;&emsp;工具只是辅助，你的能力才是核心竞争力。
                    愿它成为你求职路上的得力助手，助你斩获Offer！
                </p>
                <p class="mt-2">
                    &emsp;&emsp;冀以尘雾之微补益山海，荧烛末光增辉日月。
                </p>
                <p class="mt-2">
                    &emsp;&emsp;如果插件对你有帮助，请给她点个 Star🌟！
                </p>
            </div>
            <div style="text-align:right;font-style:italic;color:${COLORS.textLight};text-indent:0;">
                Yangshengzhou<br>
                2025年6月于南昌
            </div>
        `;

        const buttonArea = document.createElement('div');
        buttonArea.style.cssText = `
            padding: 15px 30px;
            display: flex;
            justify-content: center;
            border-top: 1px solid #eee;
            background: ${COLORS.background};
            border-radius: 0 0 10px 10px;
        `;

        const startButton = document.createElement('button');
        startButton.style.cssText = `
            background: linear-gradient(135deg, ${COLORS.primary}, ${COLORS.primaryDark});
            color: white;
            border: none;
            border-radius: 8px;
            padding: 12px 30px;
            font-size: clamp(1rem, 2vw, 1.1rem);
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s;
            box-shadow: 0 6px 16px rgba(66, 133, 244, 0.3);
            outline: none;
            display: flex;
            align-items: center;
        `;
        startButton.innerHTML = `<i class="fa fa-rocket mr-2"></i>开始使用`;

        startButton.addEventListener('click', () => {
            envelopeContainer.style.animation = 'scaleOut 0.3s ease-in forwards';
            overlay.style.animation = 'fadeOut 0.3s ease-in forwards';
            setTimeout(() => {
                // 移除遮罩层
                if (overlay.parentNode === document.body) {
                    document.body.removeChild(overlay);
                }
                // 点完信后跳转网页
                window.open('https://gitee.com/Yangshengzhou', '_blank');
            }, 300);
        });

        buttonArea.appendChild(startButton);
        envelopeFront.appendChild(titleBar);
        envelopeFront.appendChild(letterContent);
        envelopeFront.appendChild(buttonArea);
        envelope.appendChild(envelopeBack);
        envelope.appendChild(envelopeFront);
        envelopeContainer.appendChild(envelope);
        overlay.appendChild(envelopeContainer);
        document.body.appendChild(overlay);

        const style = document.createElement('style');
        style.textContent = `
            @keyframes fadeIn { from { opacity: 0 } to { opacity: 1 } }
            @keyframes fadeOut { from { opacity: 1 } to { opacity: 0 } }
            @keyframes scaleOut { from { transform: scale(1); opacity: 1 } to { transform: scale(.9); opacity: 0 } }
            @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } }

            #envelope-back:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }
            #envelope-front button:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(66, 133, 244, 0.4); }
            #envelope-front button:active { transform: translateY(1px); }
            
            @media (max-width: 480px) {
                #envelope-container { height: 350px; }
                #letter-content { font-size: 0.9rem; padding: 15px; }
            }
        `;
        document.head.appendChild(style);
    }
};
